<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				border: 1px solid black;
				width: 500px;
				margin: 100px auto;
				/*text-align: center;*/
				
			}
			.wrap{
				width: 80%;
				margin: 0 auto;
			}
			input{
				width: 200px;
				height: 30px;
				line-height: 30px;
				margin: 15px 0;
				border: 1px solid black;
				text-indent: 5px;
			}
			span{
				display:inline-block;
				width: 100px;
				font-weight: bold;
			}
			a{
				display: block;
				width: 200px;
				height: 50px;
				line-height: 50px;
				background: orange;
				text-align: center;
				text-decoration: none;
				color: white;
				font-weight: bold;
				margin-left: 50%;
				transform: translateX(-50%);
			}
			.motai{
			  position: absolute;
			  display: flex;
			  flex-flow: column;
			  align-items: center;
			  vertical-align: middle;
			  justify-content: center;
			  width: 100%;
			  height: 100%;
			  background: olivedrab;
			  border: 1px solid black;
			  text-align: center;
			  top:0;
			  z-index: 9999;
			  background:rgba(0,0,0,0.3);
			  display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="wrap">
			<p><span>用户名：</span><input class="uname" type="text" /></p>
			<p><span>密码：</span><input class="pwd" type="text" /></p>
			<a href="#" class="btn">登录</a>
			</div>
		</div>
		<div class="motai">
			<div class="box">
			<div class="wrap">
			 <p>登录成功</p>
			</div>
		</div>
		</div>
	</body>
	<script src="../jquery-1.10.1.min.js"></script>
	<script src="cookie.js"></script>
	<script>
		$(".btn").click(function(){
			var uname = $(".uname").val();
			var pwd = $(".pwd").val();
			if(uname&&pwd){
				var res = localStorage.getItem('users');
				if(res){
				res = JSON.parse(res);
				console.log(res)
				//1代表用户名存在 0 代表不存在
				var flage = 1;
				var timer =null;
				for(var i=0;i<res.length;i++){
					console.log(i)
        		if(res[i]['uname'] == uname){
						if(res[i]['pwd'] == pwd){
							alert('登录成功');
							// 设置cookie
							setCookies('uname',uname,7200,'/');
							setCookies('id',res[i]['id'],7200,'/');
							window.location.href = 'index.html';
						}else{
							alert('密码错误');
						}
						flag = 1;
						break;
					}else{
						flag=0;
					}
				}

				if(!flag){
					alert('请注册');
				}
				}else{
					alert("请注册用户！")
				}
			}else{
				alert("用户名或者密码不能为空！");
			}
		})
		
		
		
		
		
		
		
		
		
		/*
		 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * */
	</script>
</html>
